<template>
	<view class="container">
		<view class="line"></view>
		<u-form :model="form" ref="uForm" label-width="200">
			<u-form-item :border-bottom="false" label="原密码:" prop="originalPassword">
				<u-input placeholder="请输入原密码" type="password" v-model="form.originalPassword" />
			</u-form-item>
			<view class="line"></view>
			<u-form-item label="新密码:" prop="newPassWord">
				<u-input placeholder="请输入新密码" type="password" v-model="form.newPassWord" />
			</u-form-item>
			<u-form-item :border-bottom="false" label="确认新密码:" prop="passWordAgain">
				<u-input placeholder="请再次输入新密码" type="password" v-model="form.passWordAgain" />
			</u-form-item>
		</u-form>
		<view class="btn" @click="changePassword">
			确定修改
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					originalPassword: '',
					newPassWord: '', 
					passWordAgain: '',
				},
				reqBody: {},
				rules: {
					// originalPassword: [
					// 	{
					// 		required: true,
					// 		message: '请输入原密码',
					// 		trigger: ['change','blur'],
					// 	},
					// 	{
					// 		// 正则不能含有两边的引号
					// 		pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
					// 		message: '需同时含有字母和数字，长度在6-12之间',
					// 		trigger: ['change','blur'],
					// 	}
					// ],
					newPassWord: [
						{
							required: true,
							message: '请输入原密码',
							trigger: ['change','blur'],
						},
						{
							// 正则不能含有两边的引号
							pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
							message: '需同时含有字母和数字，长度在6-12之间',
							trigger: ['change','blur'],
						}
					],
					passWordAgain: [
						{
							required: true,
							message: '请输入原密码',
							trigger: ['change','blur'],
						},
						{
							// 正则不能含有两边的引号
							pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
							message: '需同时含有字母和数字，长度在6-12之间',
							trigger: ['change','blur'],
						}
					],
				},
			}
		},
		methods: {
			onReady() {
				this.$refs.uForm.setRules(this.rules);
			},
			// 修改密码
			async changePassword() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
				// debugger;
				try {		
					this.reqBody['oldPassword'] = this.form['originalPassword'];
					this.reqBody['newPassword'] = this.form['newPassWord'];
					this.reqBody['againPassword'] = this.form['passWordAgain'];
					if(this.form.passWordAgain!== this.form.newPassWord){
						uni.showModal({
							content:"密码输入错误",
							showCancel: false
						})
						return;
					}
					// #ifdef APP-PLUS
					 this.reqBody['clientId'] = plus.push.getClientInfo().clientid;
					 this.reqBody['systemInfo'] = (plus.os.name.toLowerCase() === 'android' ? "2":"1");
					// #endif		
					// console.log(this.reqBody);
					// let checkRes = graceChecker.check(this.reqBody, formRuleConfig.loginRule);
					// if (!checkRes) {
					// 	uni.showToast({
					// 		title: graceChecker.error,
					// 		icon: 'none'
					// 	});
					// 	return;
					// }
			
					// // 校验通过...
					 // this.submitBtnDis = true;
									
					let data = await this.$apis.changePassword(this.reqBody);
					console.log(JSON.stringify(data));
					// uni.setStorageSync("userInfo",data);
					if(data.code == 200){
						// 前端自动登录
						this.$store.commit('SET_USERINFO', data.data || {});
						
						
						uni.showToast({
								title: "修改密码成功",
								icon: 'none'
						});
						this.$mRouter.switchTab({
							route:this.$mRoutesConfig.index
						});
							
					
						
					}else{
						uni.showToast({
							title: result.msg,
							icon: 'none'
						});
						return;
					}
				} catch (e) {
					console.log(e);
					this.submitBtnDis = false;
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	page{
		background-color: #f4f4f4;
	}
	.container {
		.btn {
			width: 690upx;
			margin-left: 30upx;
			height: 80upx;
			background-color: #AB61FF;
			margin-bottom: 30upx;
			border-radius: 40upx;
			text-align: center;
			line-height: 80upx;
			color: #fff;
			font-size: 32upx;
			position: absolute;
			bottom: 107upx;
		}
		.u-form{
			.u-form-item{
				background-color: #fff;
				padding:  0 30upx;
				.u-form-item--left{
					margin-right: 50upx;
				}
			}
		}
		.line {
			height: 20upx;
			background-color: #f4f4f4;
			width: 100%;
		}
	}
</style>
